שליחת נתונים בעזרת Ajax וקבלת תשובה באופן מיידי ללא רענון בקלות.
המדריך עובד על Ajax בשימוש בספריית Jquery.
לאחר קבלת פניות מגולשים ברחבי הרשת בנושא החלטתי לכתוב מדריך שמסביר את אופן השימוש ב Ajax.
במדריך הזה החלטתי לעבוד על Ajax בעזרת ספריית Jquery.
ספריית Jquery היא ספריית Javascript מתקדמת שמוכרת היום לכולם והסלוגן שלה אומר "write less do more" ואני חייב לציין שבמקרה של Ajax תוכלו לראות את המימוש של זה לעומת ביצוע Ajax בצורה רגילה עם Javascript.
במדריך הזה נקח דוגמא מאוד נפוצה של כתיבת טופס פשוט ב HTML ושליחת הנתונים שהוזנו לטופס בעזרת Ajax ולאחר מכן קבלת תשובה מקובץ PHP בזמן אמת.
שלב 1 - יצירת דף HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="he" lang="he" dir="rtl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script type="text/javascript" src="General.js"></script>
<title>Ajax</title>
</head>
<body>
<form id="Form" action="">
<table>
<tr>
<td>שם מלא</td>
<td><input type="text" name="fullname" /></td>
<td><input type="submit" name="sub" value="שליחה" /></td>
</tr>
</table>
</form>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="he" lang="he" dir="rtl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script type="text/javascript" src="General.js"></script>
<title>Ajax</title>
</head>
<body>
<form id="Form" action="">
<table>
<tr>
<td>שם מלא</td>
<td><input type="text" name="fullname" /></td>
<td><input type="submit" name="sub" value="שליחה" /></td>
</tr>
</table>
</form>
</body>
</html>
יצרנו דף HTML פשוט שמכיל בתוכו טופס ובו:
שדה טקסט - שם מלא , (name=fullname)
כפתור שליחה - שליחה , (name=sub)
שימו לב בתגית ה head לצירוף ספריית Jquery וצירוף קובץ JS חיצוני בשם General.js
שלב 2 - שליחת הנתונים ב Ajax:
* פתחו קובץ בשם General.js , הקוד הבא נכתב בקובץ הזה.
$(document).ready(function(){
// האם לחצו על כפתור השליחה ?
$("form#Form").submit(function(){
// שליחת בקשת Ajax
$.ajax({
url: "ajax.php", // מיקום הקובץ אליו תשלח הבקשה
type: "POST", // סוג שליחת הנתונים - POST/GET
data: $(this).serialize(), // איזה מידע לשלוח לקובץ
success: function(callback){ // ברגע שהבקשה נשלחה והצליחה , קבלה של נתונים חזרה - callback
alert(callback);
}
});
return false;
});
});
// האם לחצו על כפתור השליחה ?
$("form#Form").submit(function(){
// שליחת בקשת Ajax
$.ajax({
url: "ajax.php", // מיקום הקובץ אליו תשלח הבקשה
type: "POST", // סוג שליחת הנתונים - POST/GET
data: $(this).serialize(), // איזה מידע לשלוח לקובץ
success: function(callback){ // ברגע שהבקשה נשלחה והצליחה , קבלה של נתונים חזרה - callback
alert(callback);
}
});
return false;
});
});
אוקיי בואו נסביר מה עשינו פה , שלב שלב.
1. קודם כל התחלנו בבדיקה שאומרת האם הטופס עם האיידי Form נשלח , כלומר
לחצו על כפתור ה submit.
2. שימו לב לפקודה return false; שדואגת שהדף לא יתרענן בעת שליחת הטופס.
3. בעזרת $.ajax אנחנו שולחים בקשה של Ajax , פירוט:
א. url - מציין את הקובץ אליו נרצה לשלוח את הבקשה
ב. type - מציין את סוג שליחת הנתונים לקובץ , POST / GET
ג. data - מציין איזה מידע להעביר לקובץ , במקרה הזה השתמשנו בפונקציה serialize() שלוקחת את כל שדות הטופס ואת הערכים שלהם ויוצרת מחרוזת אחת.
על הפונקציה הזו תוכלו למצוא מידע ודוגמאות כאן.
ד. success - אירוע המציין כי הבקשה בוצעה והצליחה , באירוע הזה אנחנו יוצרים פונקציה עם פרמטר אחד שפה אני קראתי לו callback , הפרמטר הזה מכיל את מה שהקובץ שהמידע נשלח אליו החזיר.
בתוך הפונקציה אני משתמש ב alert להצגת המידע המוחזר.
שלב 3 - יצירת קובץ php לעיבוד הנתונים:
* צרו קובץ בשם ajax.php , הקוד הבא נכתב בקובץ זה.
<?php
$fullname = $_POST['fullname'];
if(empty($fullname)){
echo "יש למלא את שדה השם";
}else {
echo "ברוך הבא ".$fullname;
}
?>
$fullname = $_POST['fullname'];
if(empty($fullname)){
echo "יש למלא את שדה השם";
}else {
echo "ברוך הבא ".$fullname;
}
?>
שימו לב בקובץ הזה אנחנו משתמשים במשתנה fullname שמכיל את הערך של $_POST['fullname'] , שדה זה נשלח בעזרת פעולת ה Ajax שעשינו.
לאחר מכן ביצעתי פעולה פשוטה שבודקת האם השדה ריק והצגת הודעה בהתאם , ובמידה והשדה מלא הצגת הודעה בהתאם.
מספר נקודות חשובות:
1. שימו לב למאפיין ה url שאתם נותנים.
2. מאפיין ה type יכול להכיל POST או GET בלבד.
3. לפעולה $.ajax ישנם עוד מספר רב של אפשרויות מעניינות שעליהם תוכלו לקרוא ולהרחיב - לחצו כאן למעבר.
המדריך הזה מהווה מדריך בסיסי בלבד בנושא , תוכלו להעמיק ולהרחיב פה באתר הרשמי של Jquery בכתובת - www.jquery.com
אשמח לענות על שאלות שיש לכם בתגובות.
בהצלחה :)
תגובות לכתבה:
מדריך מצויין.
אבל מה קורה עם אני רוצה לעשות שזה יכתוב את
echo "ברוך הבא ".$fullname;
בתור טקסט ולא בתוך alert?
שמחתי לשמוע.
לשאלתך פשוט תחליף את פעולת ה alert בכל פעולה שתרצה.
למשל אם נציב לאחר הטופס דיב חדש עם איידי - log
נוכל לעשות במקום alert את קטע הקוד הבא:
$("#log").text(callback);
ואז הטקסט יוצג בדיב שתעשה במסמך(כמובן שתוכל לעצב את הדיב , לשים לו תמונה רקע , אייקון וכו').
תרגיש חופשי להתנסות בעוד דברים , ותציג את הנתונים איך שתרצה :)
בהצלחה.
תודה על המדריך.
הבארת בצורה ברורה שקוד כתוב ב-jquery קל יותר קצר וקל לכתיבה. מעבר לזה
יש ל-jQuery קיצורים נחמדים
get.$ תעשה בקשת ajax מסוג get
post.$ הוא קיצור לבקשת post
הרשימת פרמטרים שהבאת היא חקלית. יש עוד הרבה מאוד פרמטרים שאפשר להגדיר איתם את אופן הפעולה של הבקשה .
בסה"כ מצוין בתור התחלה. מחקה להמשך
כמה דברים.
אם זה מדריך, אז למה שלא תקראו JQuery ולא Jquery?
ועוד דבר, הייתי ממליץ להוסיף את נושא ה-JSON.. שזה מאוד חשוב.
מדריך נחמד מאוד .
כל הכבוד.
@משתמש_12829
jQuery או Jquery זה לא משנה כרגע בכלל מה כתוב בלוגו שלהם.
לגבי נושא ה JSON המדריך הזה הוא מדריך בסיסי ראשוני כמו שציינתי לכן הוא מספק מידע על פונקציה $.ajax ולא על פעולת json
@עידו
שמח לשמוע , בהצלחה :)
אמרת שאפשר להפוך את ההתראה לטקסט. איך עושים את זה בעזרת דיב? כלומר איך מחברים מסמך CSS ל-JS?
לפני שאתה מתחיל ללמוד כאלו מאמרים, הייתי ממליץ לך ללמוד קודם כל JS ו-JQuery.
אחרי שתדע את הפרטים האלו, תעבור על המדריך הזה, ותנסה תמיד לשפר אותו לפי הצרכים שלך.
וכן, אפשר להוסיף CSS, וגם אלמנטים איפה שבא לך ומתי שתרצה עם JQuery.
משתמש_12829 אתה יכול לחפש באתר מדריך מאוד מפורט ומוסבר על עבודה עם JSON בPHP ועל אפשרות לשלבו בעזרת jQuery .
משתמש_12829: עם js אתה עורך את הdom ולא את הקבצים עצמם.
יש לי בעיה
עשיתי סקיפט שברגע שלוחצים על enter הוא שולח.
אז יוצר מצב שלוחצים על הכפתור שלח הוא שולח ב AJAX
ושלוחצים על אנטר הוא לא מעביר את זה כמו AJAX איך אפשר לסדר את זה ?